
<template>
	<div class="backgrountMap">
		<div id='allmap'>

			<baidu-map class="map" @ready="handler">
			</baidu-map>
		</div>
		<!-- <dataScreenList ref="dataScreenList"></dataScreenList> -->
	</div>
</template>

<script>
// 初始化地图
export default {
	data() {
		return {
		};
	},
	created() {},
	mounted() {
		// this.init();
	},
	watch: {},
	computed: {},
	methods: {
		init() {},
		// 地图初始化
		handler(locationData) {
			console.log('locationData', locationData);
			let self = this;
			var map = new BMap.Map('allmap', {
				enableMapClick: false,
			});
			console.log('map1', map);
			// 设置中心位置点
			let point = new BMap.Point(116.404, 39.915);
			map.centerAndZoom(point, 15);
			map.setMapType(BMAP_SATELLITE_MAP);
			// 地图比例尺
			map.addControl(
				new BMap.ScaleControl({
					anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
				})
			);
			// 鼠标滑动缩放
			map.enableScrollWheelZoom(true);
			// this.$nextTick(() => {
			// 	setTimeout(() => {
			// 		map.setViewport(locationData);
			// 		// 调用添加标记物方法
			// 		self.addMarker(locationData, map);
			// 	}, 100);
			// });
		},
		// getData() {
		// 	this.locationData = []; //初始化经纬度数组集
		// 	let self = this;
		// 	let query = {
		// 		// 接口请求参数
		// 	};
		// 	// 调用接口获取经纬度数组集
		// 	dataList(query)
		// 		.then((res) => {
		// 			this.listData = res.data.list;
		// 			this.listData.map((row) => {
		// 				if (row.longitude && row.longitude) {
		// 					let real_point = new BMap.Point(
		// 						row.longitude,
		// 						row.latitude
		// 					);
		// 					// 将gps经纬度转换成百度地图的经纬度
		// 					new BMap.Convertor().translate(
		// 						[real_point],
		// 						1,
		// 						5,
		// 						function (data) {
		// 							if (data.status === 0) {
		// 								self.locationData.push(data.points[0]);
		// 							}
		// 						}
		// 					);
		// 				}
		// 			});
		// 			// 设置延迟，待数据获取到后初始化地图，handler方法在下面定义
		// 			this.$nextTick(() => {
		// 				setTimeout(() => {
		// 					self.handler(self.locationData);
		// 				}, 400);
		// 			});
		// 		})
		// 		.catch((error) => {
		// 			console.log(error);
		// 		});
		// },

		// // 向地图添加经纬度位置点标记物
		// addMarker(pointArray, map) {
		// 	let self = this;
		// 	let marker;
		// 	for (var i = 0; i < pointArray.length; i++) {
		// 		// 自定义图标
		// 		let icon = new BMap.Icon(icon, new BMap.Size(26, 45), {
		// 			imageOffset: new BMap.Size(-25 - 17, 0),
		// 			anchor: new BMap.Size(13, 40),
		// 		});
		// 		marker = new BMap.Marker(pointArray[i], {
		// 			icon: icon,
		// 		});
		// 		map.addOverlay(marker);
		// 		// 设置标记物上的文字
		// 		marker.setLabel(new BMap.Label('标记点说明'));
		// 		// 调用点击标记物显示信息弹窗
		// 		this.setInfo(map, marker, pointArray[i]);
		// 	}
		// },

		// // 设置点击地图标记点信息弹窗的内容 self指代window,避免与地图fuc的this混淆
		// setInfo(map, marker, pt) {
		// 	let self = this;
		// 	var opts = {
		// 		width: 170, // 信息窗口宽度
		// 		height: 170, // 信息窗口高度
		// 		title: '位置信息', // 信息窗口标题
		// 	};
		// 	marker.addEventListener('click', function (e) {
		// 		// 逆地址解析-根据经纬度获取中文地址
		// 		self.getAddress(pt);
		// 		// 设置延迟，等获取到中文地址再显示弹窗信息
		// 		self.$nextTick(() => {
		// 			setTimeout(() => {
		// 				str =
		// 					'经度：' +
		// 					pt.lng +
		// 					'<br>纬度：' +
		// 					pt.lat +
		// 					'<br>地址：' +
		// 					self.address;
		// 				let infoWindow = new BMap.InfoWindow(str, opts); // 创建信息窗口对象
		// 				map.openInfoWindow(infoWindow, pt); //开启信息窗口
		// 			}, 200);
		// 		});
		// 	});
		// },
		// // 逆地址解析-根据经纬度获取中文地址
		// getAddress(point) {
		// 	let self = this;
		// 	let geoc = new BMap.Geocoder({
		// 		extensions_town: true,
		// 	});
		// 	// 根据坐标得到地址描述
		// 	geoc.getLocation(
		// 		new BMap.Point(point.lng, point.lat),
		// 		function (result) {
		// 			if (result) {
		// 				self.address = result.address;
		// 			}
		// 		}
		// 	);
		// },
	},
};
</script>
<style  scoped>
.backgrountMap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100vw;
}
.sample {
	width: 120px;
	height: 40px;
	line-height: 40px;
	background: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	box-shadow: 0 0 5px #000;
	color: #fff;
	text-align: center;
	padding: 10px;
	position: absolute;
}
.sample.active {
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
}
#allmap {
	width: 100%;
	height: 100%;
}
.editMap-container {
	height: 100%;
}
.mapClass {
	width: 100%;
	height: 100%;
}
::v-deep .mapClass .tdt-control-container .tdt-bottom {
	display: none;
}
a {
	color: rgb(0, 110, 255);
}
</style>
